<!--
Copyright 2013 Google Inc. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<!DOCTYPE html>

<style>
div.anim {
  position: relative;
}
</style>

<div id="target1" class="anim"></div>
<div id="target2" class="anim"></div>
<div id="target3" class="anim"></div>
<div id="target4" class="anim"></div>

<script src="../bootstrap.js" nochecks></script>
<script>
"use strict";

var leftToRight = [{left: "100px"}, {left: "200px"}];
var leftToRightLarge = [{left: "100px"}, {left: "1000px"}];
var rightToLeft = [{left: "200px"}, {left: "100px"}];
var noop = {color: "red"};

// Test that an animation uses the correct compositing order when it has a
// grandparent that remains active longer than its parent.
//
// The first animation should run between times 0.0 and 1.0 and the second
// between times 2.0 and 3.0. Both use the default fill mode of "forwards", but
// because the second animation has a later start time, it should be composited
// second, so the div should end up on the left.
var target1 = document.getElementById("target1");
var player = document.timeline.play(new ParGroup([
  new ParGroup([
    new Animation(target1, leftToRight, 1.0),
  ]),
  new SeqGroup([
    new Animation(target1, noop, 2.0),
    new Animation(target1, rightToLeft, 1.0),
  ]),
]));

timing_test(function() {
    at(3.0, function() {assert_equals(getComputedStyle(target1).getPropertyValue("left"), "100px")});
  }, "First animation should have earlier compositing order");

// Test that compositing order takes account of playback rate.
//
// The start time of the first animation is 0.0. The SeqGroup has a playback
// rate of 4.0, so the effective start time of its child animation is 2.0. So
// the the div should end up on the left at time 3.0.
var target2 = document.getElementById("target2");
var player = document.timeline.play(new ParGroup([
  new Animation(target2, leftToRight, 1.0),
  new SeqGroup([
    new Animation(target1, noop, 8.0),
    new Animation(target2, rightToLeft, 4.0),
  ], {playbackRate: 4.0}),
]));

timing_test(function() {
    at(3.0, function() {assert_equals(getComputedStyle(target2).getPropertyValue("left"), "100px")});
  }, "Second animation should have later compositing order");

// Test compositing order follows Player start time order.
var target3 = document.getElementById("target3");
var player1 = document.timeline.play(
  new Animation(target3, leftToRight, 1.0));
player1.startTime += 1.0;
var player2 = document.timeline.play(
  new Animation(target3, leftToRightLarge, 2.0));

timing_test(function() {
    at(2.0, function() {assert_equals(getComputedStyle(target3).getPropertyValue("left"), "200px")});
  }, "First animation should have latest compositing order");

// Test compositing order follows tree order.
var target4 = document.getElementById("target4");
var player = document.timeline.play(new ParGroup([
  new Animation(target4, leftToRightLarge, 1.0),
  new SeqGroup([
    new Animation(target4, leftToRightLarge, 1.0),
    new ParGroup([
      new Animation(target4, leftToRightLarge, 1.0),
      new Animation(target4, leftToRightLarge, 1.0),
    ]),
  ]),
  new ParGroup([
    new Animation(target4, leftToRightLarge, 1.0),
    new Animation(target4, leftToRight, 1.0),
  ]),
]));

timing_test(function() {
    at(2.0, function() {assert_equals(getComputedStyle(target4).getPropertyValue("left"), "200px")});
  }, "Last animation should have latest compositing order");

</script>
